<template>
  <div>
    <Search :search="search" :reset="reset">
      <template v-slot:body>
        <el-form-item label="生产备料" prop="fbillno">
          <el-input v-model="query.fbillno" name="fbillno" clearable />
        </el-form-item>

      </template>
    </Search>
    <div class="table-default">
      <!-- <Operate :show="open" /> -->
      <el-button type="primary" class="backBtn" @click="flowHandler">绑定工艺</el-button>
      <!-- 选择订单--- {{ ids }} -->
      <el-table :data="tableData" class="mt-3" v-loading="loading" ref="multipleTableRef" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" />
        <el-table-column prop="fmoentryseq" label="生产订单行号" min-width="120" />
        <el-table-column prop="fbillno" label="单据编号" min-width="160" />
        <el-table-column prop="fprdorgid_name" label="组织名称" min-width="150"/>
        <el-table-column prop="fmaterialid" label="物料编码" min-width="150"/>
        <el-table-column prop="fmaterialname" label="物料名称" min-width="270"/>
        <el-table-column prop="fmaterialmodel" label="规格" min-width="150"/>
        <el-table-column prop="fmodel" label="型号" />
        <el-table-column prop="funitid" label="单位" />
        <el-table-column prop="fqty" label="数量" />
        <el-table-column prop="fbomid" label="BOM版本" min-width="180"/>
        <el-table-column
          prop="fmoentrystatus"
          label="生产订单状态"
          column-key="status"
          :filters="filterList"
          :filter-method="filterHandler"
          min-width="130"

        >
        <template #default="scope">
            <el-tag class="ml-2" type="default" >{{ formatFmoentrystatus[scope.row.fmoentrystatus] }}</el-tag>
            <!-- <el-tag class="ml-2" type="success" >{{ formatFmoentrystatus[scope.row.fdocumentstatus] }}</el-tag> -->
          </template>
      </el-table-column>
        <el-table-column prop="fmotype" label="生产订单类型" min-width="160"/>
        <el-table-column prop="fmobillno" label="生产订单编号" min-width="160"/>
        <el-table-column prop="fdocumentstatus" label="单据状态">
          <template #default="scope">
            <el-tag class="ml-2" type="warning" v-if="scope.row.fdocumentstatus == 0">{{ formatFdocumentstatus[scope.row.fdocumentstatus] }}</el-tag>
            <el-tag class="ml-2" type="success" v-else>{{ formatFdocumentstatus[scope.row.fdocumentstatus] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="fplannedstarttime" label="计划开工时间" min-width="180"/>
        <el-table-column prop="fplannedcompletiontime" label="计划完工时间" min-width="190"/>
        <el-table-column prop="fline" label="生产线" min-width="120"/>
        <el-table-column prop="fworkshopid_name" label="生产车间" min-width="120"/>

        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <Show @click="checkDetail(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <proCreate @close="close(reset)" :primary="id" :api="api" :ids="ids" />
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, route, ref } from 'vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
// import { useEnabled } from '/admin/composables/curd/useEnabled'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import http from '/admin/support/http'

let router = useRouter()

const api = 'production/production/order'

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()
// const { enabled, success,  afterEnabled } = useEnabled()
// console.log(enabled);

const tableData = computed(() => data.value?.data)

let ProductionOrderStatus = ref([])

const getOptions = () => {
  http.get('/options/ProductionOrderStatus').then(r => {
    // console.log(r);
    ProductionOrderStatus.value = r.data.data
    /***
            { text: '开工', value: '1' },
            { text: '完工', value: '2' },
     ***/
    let arr = r.data.data
    let obj = {}
    let list = []
    arr.forEach((item,index) => {
      obj[item.value] = item.label

      list[index] = {}
      list[index].text = item.label
      list[index].value = String(item.value)
    })
    console.log(list);
    console.log(obj);
    
    
    formatFmoentrystatus.value = obj
    filterList.value = list
  })
}

getOptions()

const formatFmoentrystatus = ref({})
const filterList = ref([])

// const formatFdocumentstatus = (row, column, value, index) => {
//   return {
//     0: '未审核',
//     1: '审核',
//   }[value]
// }

const formatFdocumentstatus = {
  0: '未审核',
  1: '审核',
}
// const filterTag = (value, row:filterList) => {
//   console.log(row.fdocumentstatus,value);
//   return row.fdocumentstatus === value
// }

const filterHandler = (
  value: string,
  row,
  column
) => {
  const property = column['property']
  console.log(row[property],value);
  
  return row[property] === value
}

const checkDetail = data => {
  console.log('详情id', data)
  router.push('/production/productionOrderDetail?id=' + data)
}

const ids = ref([])

const handleSelectionChange = val => {
  // console.log(val)
  if (val.length > 0) {
    val.forEach((item, index) => {
      // console.log(item.id)
      ids.value.push(item.id)
      ids.value = [...new Set(ids.value)]
    })
  } else {
    ids.value.length = 0
  }
  console.log('选中数组id', ids.value)
}

const flowHandler = () => {
  if (ids.value.length <= 0) {
    ElMessage({
      message: '请先选择订单！',
      type: 'warning',
    })
    return
  } else {
    open()
  }
}

onMounted(() => {
  search()
  deleted(reset)

  console.log(ProductionOrderStatus.value)
})
</script>


<style>
.backBtn {
  margin: 20px 10px 0;
}
</style>